<template>
  <div class="container">
    <div class="progressBar" :style="`width:${progressBarWidth}%;`"></div>
    <div class="bottomPlayer">
      <div class="musicInfo">
        <div @click="toPlayer">
          <el-avatar
            fit="cover"
            :src="musicDetail.picUrl"
            shape="square"
          ></el-avatar>
        </div>
        <div class="content">
          <div class="title">
            {{ musicDetail.name }}-{{ musicDetail.singer }}
          </div>
          <div class="time">
            <span>{{ currentTime }}</span> /
            <span>{{ duration }}</span>
          </div>
        </div>
      </div>
      <div class="control">
        <span class="iconfont icon-xihuan"></span>
        <span class="iconfont icon-perv" @click="PERV"></span>
        <span
          @click="changStatus"
          class="iconfont"
          :class="isplay ? 'icon-zantingtingzhi' : 'icon-bofang2'"
        ></span>
        <span class="iconfont icon-next" @click="NEXT"></span>
        <span class="iconfont icon-fenxiang1"></span>
      </div>
      <div class="action">
        <span class="iconfont icon-jingyu"></span>
        <span class="iconfont icon-marry"></span>
        <span class="iconfont icon-bofangliebiao"></span>
        <span class="iconfont icon-ci"></span>
        <span class="iconfont icon-laba"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters,mapActions } from "vuex";
export default {
  data() {
    return {
      isPlayer: false,
      currentTime: "00:00",
      progressBarWidth: 0,
      isplay: false,
    };
  },
  computed: {
    ...mapState("player", ["musicDetail"]),
    ...mapGetters("player", ["musicId"]),
    duration(){
      return this.$moment(this.musicDetail.duration).format("mm:ss")
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.eventListener();
    });
  },
  watch: {
    async musicId(newId, oldId) {
      if (newId === oldId) return;
      this.$audio.removeEventListener("timeupdate", this.throttle);
      this.getMusicDetail();
      this.getMusicUrl();
      this.getMusicComment();
      // 必须等待歌词拿才能监听
      await this.getMusicLyric();
     
    },
  },
  methods: {
     ...mapActions("player", [
      "getMusicDetail",
      "getMusicUrl",
      "getMusicComment",
      "getMusicLyric",
    ]),
    ...mapMutations("player", ["NEXT", "PERV"]),
    eventListener() {
      this.$audio.addEventListener("playing", () => {
        this.isplay = true;
      });
      this.$audio.addEventListener("timeupdate", () => {
        // 拿到的是秒 需要转为毫秒
        const currentTime = this.$audio.currentTime * 1000;
        this.progressBarWidth = (currentTime / this.musicDetail.duration) * 100;
        this.currentTime = this.$moment(currentTime).format("mm:ss");
      });
      this.$audio.onended = () => {
        this.NEXT();
      };
    },

    toPlayer() {
      if (this.$route.name === "Player") {
        this.$router.go(-1);
      } else {
        this.$router.push(`/player/${localStorage.getItem("musicId")}`);
      }
    },
    changStatus() {
      this.isplay ? this.$audio.pause() : this.$audio.play();
      this.isplay = !this.isplay;
    },
  },
};
</script>

<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

.bottomPlayer {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-top: 2px solid red; */
}
.progressBar {
  height: 2px;
  background-color: red;
  top: 0;
}
.bottomPlayer > .musicInfo {
  display: flex;
  align-items: center;
  padding-left: 3px;
  width: 200px;
}
.bottomPlayer > .musicInfo > .content {
  margin-left: 10px;
  font-size: 12px;
}
.bottomPlayer > .musicInfo > .content > .title {
  margin-bottom: 5px;
  white-space: nowrap;
}
.bottomPlayer > .musicInfo > .content span {
  font-size: 12px;
}
/* .bottomPlayer > .musicInfo > .content > .time {

} */
span {
  color: #555;
  font-size: 18px;
}
.bottomPlayer > .control > span {
  padding: 0 8px;
}
/* .bottomPlayer > .control > .like {
} */
.bottomPlayer > .action > span {
  padding: 0 8px;
}
</style>
